<template>
  <div class="infinite-container" style="top:0;bottom:56px;">
    <div class="setting-header">
        <div class="user-info">
          <img src="../../assets/head_images.png" />
          <div class="username">{{person.mobile}}</div>
          <a href="javascript:;" class="remove-bind" @click="confirmDialog = true"></a>
          <div class="label-identification yes" v-if="person.outpatientCardNo"></div>
          <div class="label-identification no" v-else></div>
        </div>
    </div>
    <mu-flexbox class="bgwhite setting-nav">
      <mu-flexbox-item @click.native="go('/setting/improve-user-info')">
        <i class="iconfont icon-gerenxinxi"></i>
        <div>个人信息</div>
      </mu-flexbox-item>
      <mu-flexbox-item @click.native="go('/setting/bind-visitcard')">
        <i class="iconfont icon-shenfenrenzheng" ></i>
        <div>身份认证</div>
      </mu-flexbox-item>
      <mu-flexbox-item @click.native="go('/setting/family')">
        <i class="iconfont icon-paidui"></i>
        <div>就诊人管理</div>
      </mu-flexbox-item>
      <!-- <mu-flexbox-item>
        <i class="iconfont icon-genghuanshoujihao"></i>
        <div>更换手机号</div>
      </mu-flexbox-item> -->
    </mu-flexbox>

    <!-- confirm dialog -->
    <mu-dialog :open="confirmDialog"  @close="close">
      解绑后无法操作预约挂号等功能，是否继续？
      <mu-flat-button slot="actions" @click="close" default label="取消" fullWidth/>
      <mu-flat-button slot="actions" primary @click="unBind" label="确定"/>
    </mu-dialog>
  </div>
</template>

<script>
import {commonAjax} from '../../api/api'
export default {
  name: 'message',
  data () {
    return {
      person: JSON.parse(localStorage.person || '{}'),
      confirmDialog: false
    }
  },
  mounted () {
  },
  destroyed () {
  },
  methods: {
    unBind () {
      // todo
      let params = {
        mobile: this.person.mobile,
        openId: this.person.openid
      }
      commonAjax('user/unbind', params).then(res => {
        if (res.data.code === 1) {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg,
            fn: () => this.$router.replace('/login')
          })
          // remove person
          localStorage.removeItem('person')
        }
      })
    },
    close () {
      this.confirmDialog = false
    },
    go (url) {
      this.$router.push(url)
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../common/css/vars.less';
.setting-header{
  background:#fff url(../../assets/bg_bg.png) no-repeat;
  background-size: 100%;
  padding-top: 4em;
  .user-info {
    background: url(../../assets/bg.png) no-repeat;
    background-size: 100%;
    width: 80%;
    height: 176px;
    margin:auto;
    position: relative;
    .label-identification {
      width: 74px;
      height: 25px;
      background-size: 100%;
      position: absolute;
      right: 3px;
      top: 1em;
      &.yes {
        background-image: url(../../assets/tag_2.png);
      }
      &.no {
        background-image: url(../../assets/tag_1.png);
      }
      
    }
    .username,.remove-bind,img {
      margin:auto;
      display: block;
      position: relative;
    }
    .username {
      text-align: center;
      font-size: 1.2em;
      top: -1em;
    }
    img {
      width: 70px;
      top: -2em;
    }
    .remove-bind {
      background: url(../../assets/btn_jb.png) no-repeat;
      display: block;
      background-size: 100%;
      width: 65px;
      height: 22px;
    }
  }
}
.setting-nav {
  text-align: center;
  padding: 1em 0 2em;
  .iconfont {
    font-size: 2em;
    color: @color-primary;
  }
}
</style>
